<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="700px"
    @close="close"
  >
    <el-form ref="form" label-width="100px" :model="form" :rules="rules" :disabled="disabled">
      <el-form-item label="合作方全称" prop="label">
        <el-input v-model.trim="form.label" clearable/>
      </el-form-item>
      <el-form-item label="合作方简称" prop="short_label">
        <el-input v-model.trim="form.short_label" clearable/>
      </el-form-item>
      <el-form-item label="合作方地址">
        <el-row type="flex" align="middle" v-for="(item, index) in form.address" :key="index" class="row-with-margin">
          <el-col :span="20">
            <el-input v-model.trim="form.address[index]" placeholder="XX省XX市XX街道XX路XX号" clearable/>
          </el-col>
          <el-col :span="1" class="gap"></el-col>
          <el-col :span="4" class="text-right">
            <el-button circle icon="el-icon-delete" type="danger" @click="removeAddress(index)"
                       v-if="form.address.length > 1"/>
            <el-button circle icon="el-icon-plus" type="primary" @click="addAddress" v-if="index == 0"/>
          </el-col>
          <br/>
        </el-row>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-row type="flex" align="middle" v-for="(item, index) in form.connector" :key="index" class="row-with-margin">
          <el-col :span="6">
            <el-input v-model.trim="item.name" placeholder="姓名" clearable/>
          </el-col>
          <el-col :span="1" class="gap"></el-col>
          <el-col :span="8">
            <el-input v-model.trim="item.tel" placeholder="电话" clearable/>
          </el-col>
          <el-col :span="1" class="gap"></el-col>
          <el-col :span="4" class="text-right">
            <el-button circle icon="el-icon-delete" type="danger" @click="removeConnector(index)"
                       v-if="form.connector.length > 1"/>
            <el-button circle icon="el-icon-plus" type="primary" @click="addConnector" v-if="index == 0"/>
          </el-col>
          <br/>
        </el-row>
      </el-form-item>
      <el-form-item label="供销关系">
        <el-checkbox-group v-model="form.relationship">
          <el-checkbox label="1" value="1">客户</el-checkbox>
          <el-checkbox label="2" value="2">下游买家</el-checkbox>
          <el-checkbox label="3" value="3">处理工厂</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model.trim="form.remark" type="textarea"/>
      </el-form-item>
      <el-form-item label="上传附件" style="height:180px;margin-bottom: 30px">
        <template v-if="form.file_path">
          <el-link :href="fileRootPath+form.file_path" :underline="false" :download="form.file_path">
            <el-button icon="el-icon-download" size="small" type="success" plain>下载</el-button>
          </el-link>
          <el-link :underline="false">
            <el-button @click="delete_file" icon="el-icon-delete" type="danger" plain>删除</el-button>
          </el-link>
        </template>
        <template v-else>
          <attachment-upload typ="customer" @input="changeUrl" ref="uploadFile"/>
          <p class="tips-words">ps:附件格式doc(x),xls(x),pdf,ppt(x),txt,zip,rar,7z,jp(e)g,png,gif,且不超过10M</p>
        </template>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :disabled="disabled" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {doEdit} from '@/api/business/customer'
import {getAdminListByRole} from "@/api/manage/adminUser";
import AttachmentUpload from "@/views/other/upload/attachment";

export default {
  name: 'customerEdit',
  components: {AttachmentUpload},
  data() {
    return {
      disabled: false,
      form: {
        'address': [''],
        'connector': [
          {'name': '', 'tel': ''},
        ],
        'relationship': []
      },
      rules: {
        label: [
          {required: true, trigger: 'blur', message: '请填写全称'},
        ],
        short_label: [
          {required: true, trigger: 'blur', message: '请填写简称'},
        ],
        address: [
          {required: true, trigger: 'blur', message: '请填写站点地址'},
        ]
      },
      title: '',
      dialogFormVisible: false,
      mainList: [],
      statusMap: [
        {
          status: 0,
          text: '禁用'
        },
        {
          status: 1,
          text: '启用'
        }
      ],
      targetMap: [
        {
          target: '_blank',
          text: '新页面打开'
        },
        {
          target: '_self',
          text: '当前页打开'
        }
      ],
      adminList: [],
      fileRootPath: process.env.VUE_APP_FILE_ROOT_PATH

    }
  },
  created() {
    this.getAdminList()
  },
  methods: {
    delete_file(){
      this.form.file_path = ''
    },
    changeUrl(data) {
      this.form.tempPath = data.tempPath
      this.form.fileType = data.fileType
    },
    addAddress() {
      this.form.address.push('');
    },
    removeAddress(index) {
      this.form.address.splice(index, 1);
    },
    addConnector() {
      this.form.connector.push({'tel': '', 'name': ''});
    },
    removeConnector(index) {
      this.form.connector.splice(index, 1);
    },
    forceUpdate() {
      this.$forceUpdate()
    },
    showEdit(row) {
      if (!row) {
        this.title = '添加'
      } else {
        this.title = '编辑'
        this.form = Object.assign({}, row)
        this.form.temp_old = this.form.file_path
      }
      this.dialogFormVisible = true
      this.disabled = false
    },
    viewEdit(row) {
      this.title = '查看'
      this.form = Object.assign({}, row)
      this.dialogFormVisible = true
      this.disabled = true

    },
    close() {
      this.$refs['form'].resetFields()
      if(this.$refs['uploadFile'])
        this.$refs['uploadFile'].resetTempUrl()
      this.form = this.$options.data().form
      this.dialogFormVisible = false
    },
    save() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          const {msg} = await doEdit(this.form)
          this.$baseMessage(msg, 'success', 'vab-hey-message-success')
          this.$emit('fetch-data')
          this.close()
        }
      })
    },
    getAdminList() {
      getAdminListByRole({'role': 2}).then(response => {
        this.adminList = response.data.list
      })
    }
  },
}
</script>
<style scoped>
.row-with-margin {
  margin-bottom: 5px; /* 你可以根据需要调整这个值 */
}

.gap {
  /* 如果你已经有了gap类，确保它不会影响布局 */
}
</style>
